<!--
 * @Author: XXX
 * @Date: 2022-01-05 08:34:45
 * @LastEditTime: 2022-01-06 14:57:53
 * @LastEditors: XX
 * @Description: 
 * @FilePath: \am-dashboard\src\pages\government\components\Left1.vue
 * 别乱动！
-->
<template>
  <div id="left1Container" style="height: 95%"></div>
</template>
<script>
// 导入图表
import { Line } from "@antv/g2plot";
export default {
  data() {
    return {};
  },
  methods: {
    initChart() {
      // 准备数据
      const data = [
        { time: "2022-01-01", temperatur: 12 },
        { time: "2022-01-02", temperatur: 9 },
        { time: "2022-01-03", temperatur: 14 },
        { time: "2022-01-04", temperatur: 10 },
        { time: "2022-01-05", temperatur: 8 },
        { time: "2022-01-06", temperatur: 14 },
        { time: "2022-01-07", temperatur: 17 },
      ];
      // 初始化图表实例，配置配置项
      const line = new Line("left1Container", {
        data,
        xField: "time",
        yField: "temperatur",
        label: {
          formatter(val) {
            return val.temperatur + "℃";
          },
        },
        xAxis: {
          range: [0, 1],
          label: {
            style: {
              fill: "white",
            },
          },
        },
        yAxis: {
          label: {
            style: {
              fill: "white",
            },
          },
          grid: {
            line: {
              // 设置辅助线样式
              style: {
                lineDash: [2, 3], // 虚线配置，第一个值为虚线每个分段的长度，第二个值为分段
                strokeOpacity: 0.2, // 辅助线透明度
              },
            },
          },
        },
        point: {
          size: 5,
          shape: "diamond",
          style: {
            fill: "white",
            stroke: "#5B8FF9",
            lineWidth: 2,
          },
          formatter(val) {
            return val + "℃";
          },
        },

        tooltip: { showMarkers: false },
        state: {
          active: {
            style: {
              shadowBlur: 4,
              stroke: "#000",
              fill: "red",
            },
          },
        },
        interactions: [{ type: "marker-active" }],
      });
      // 执行绘画渲染
      line.render();
    },
  },
  // vue实例完全挂载到页面上
  mounted() {
    this.initChart();
  },
};
</script>
<style scoped>
.sdfsdf {
  color: #7a1919;
}
</style>